<template>
  <el-card class="odds-volatility-card" shadow="never">
    <template #header>
      <div class="card-header">
        <span>赔率波动范围设置</span>
      </div>
    </template>

    <div class="odds-volatility-content">
      <el-row :gutter="20" class="volatility-row">
        <el-col :span="8">
          <div class="volatility-control">
            <div class="volatility-info">
              <div class="volatility-range">当前主队赔率波动率范围: {{ oddsRange.home.min.toFixed(3) }} - {{ oddsRange.home.max.toFixed(3) }}</div>
              <div class="volatility-range">波动率: {{ homeVolatility }}%</div>
            </div>
            <div class="volatility-slider">
              <span class="volatility-label">主胜</span>
              <el-slider
                v-model="homeVolatility"
                :min="1"
                :max="20"
                :step="0.1"
                :format-tooltip="formatTooltip"
                @change="onVolatilityChange"
                style="flex: 1;"
              />
              <div class="volatility-stepper">
                <el-button @click="decreaseHomeVolatility" :icon="Minus" size="small" />
                <span class="volatility-value">{{ homeVolatility.toFixed(2) }}%</span>
                <el-button @click="increaseHomeVolatility" :icon="Plus" size="small" />
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="volatility-control">
            <div class="volatility-info">
              <div class="volatility-range">当前平局赔率波动率范围: {{ oddsRange.draw.min.toFixed(3) }} - {{ oddsRange.draw.max.toFixed(3) }}</div>
              <div class="volatility-range">波动率: {{ drawVolatility }}%</div>
            </div>
            <div class="volatility-slider">
              <span class="volatility-label">平局</span>
              <el-slider
                v-model="drawVolatility"
                :min="1"
                :max="20"
                :step="0.1"
                :format-tooltip="formatTooltip"
                @change="onVolatilityChange"
                style="flex: 1;"
              />
              <div class="volatility-stepper">
                <el-button @click="decreaseDrawVolatility" :icon="Minus" size="small" />
                <span class="volatility-value">{{ drawVolatility.toFixed(2) }}%</span>
                <el-button @click="increaseDrawVolatility" :icon="Plus" size="small" />
              </div>
            </div>
          </div>
        </el-col>

        <el-col :span="8">
          <div class="volatility-control">
            <div class="volatility-info">
              <div class="volatility-range">当前客队赔率波动率范围: {{ oddsRange.away.min.toFixed(3) }} - {{ oddsRange.away.max.toFixed(3) }}</div>
              <div class="volatility-range">波动率: {{ awayVolatility }}%</div>
            </div>
            <div class="volatility-slider">
              <span class="volatility-label">客胜</span>
              <el-slider
                v-model="awayVolatility"
                :min="1"
                :max="20"
                :step="0.1"
                :format-tooltip="formatTooltip"
                @change="onVolatilityChange"
                style="flex: 1;"
              />
              <div class="volatility-stepper">
                <el-button @click="decreaseAwayVolatility" :icon="Minus" size="small" />
                <span class="volatility-value">{{ awayVolatility.toFixed(2) }}%</span>
                <el-button @click="increaseAwayVolatility" :icon="Plus" size="small" />
              </div>
            </div>
          </div>
        </el-col>
      </el-row>

      <div class="query-button-wrapper">
        <el-button
          type="primary"
          size="large"
          @click="querySameOddsAnalysis"
          :loading="sameOddsAnalysisLoading"
        >
          <el-icon><Search /></el-icon>
          查询同赔
        </el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import { Minus, Plus, Search } from '@element-plus/icons-vue'

export default {
  name: 'OddsVolatilityControls',
  components: {
    Minus,
    Plus,
    Search
  },
  props: {
    oddsRange: {
      type: Object,
      default: () => ({
        home: { min: 0, max: 0 },
        draw: { min: 0, max: 0 },
        away: { min: 0, max: 0 }
      })
    },
    sameOddsAnalysisLoading: {
      type: Boolean,
      default: false
    },
    initialHomeVolatility: {
      type: Number,
      default: 5
    },
    initialDrawVolatility: {
      type: Number,
      default: 5
    },
    initialAwayVolatility: {
      type: Number,
      default: 5
    }
  },
  emits: ['volatility-change', 'query-same-odds'],
  data() {
    return {
      homeVolatility: this.initialHomeVolatility,
      drawVolatility: this.initialDrawVolatility,
      awayVolatility: this.initialAwayVolatility
    }
  },
  methods: {
    formatTooltip(value) {
      return `${value}%`
    },
    onVolatilityChange() {
      this.$emit('volatility-change', {
        home: this.homeVolatility,
        draw: this.drawVolatility,
        away: this.awayVolatility
      })
    },
    querySameOddsAnalysis() {
      this.$emit('query-same-odds')
    },
    decreaseHomeVolatility() {
      if (this.homeVolatility > 1) {
        this.homeVolatility = parseFloat((this.homeVolatility - 0.5).toFixed(2))
        this.onVolatilityChange()
      }
    },
    increaseHomeVolatility() {
      if (this.homeVolatility < 20) {
        this.homeVolatility = parseFloat((this.homeVolatility + 0.5).toFixed(2))
        this.onVolatilityChange()
      }
    },
    decreaseDrawVolatility() {
      if (this.drawVolatility > 1) {
        this.drawVolatility = parseFloat((this.drawVolatility - 0.5).toFixed(2))
        this.onVolatilityChange()
      }
    },
    increaseDrawVolatility() {
      if (this.drawVolatility < 20) {
        this.drawVolatility = parseFloat((this.drawVolatility + 0.5).toFixed(2))
        this.onVolatilityChange()
      }
    },
    decreaseAwayVolatility() {
      if (this.awayVolatility > 1) {
        this.awayVolatility = parseFloat((this.awayVolatility - 0.5).toFixed(2))
        this.onVolatilityChange()
      }
    },
    increaseAwayVolatility() {
      if (this.awayVolatility < 20) {
        this.awayVolatility = parseFloat((this.awayVolatility + 0.5).toFixed(2))
        this.onVolatilityChange()
      }
    }
  }
}
</script>

<style scoped>
.odds-volatility-card {
  margin-bottom: 20px;
}

.odds-volatility-content {
  padding: 10px 0;
}

.volatility-row {
  margin-bottom: 20px;
}

.volatility-control {
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.volatility-info {
  margin-bottom: 10px;
  padding: 8px;
  background-color: #e3f2fd;
  border-radius: 4px;
  font-size: 12px;
}

.volatility-range {
  margin: 2px 0;
  color: #1976d2;
  font-weight: 500;
}

.volatility-slider {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-top: 10px;
}

.volatility-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 10px;
}

.volatility-label {
  font-size: 14px;
  color: #606266;
  min-width: 60px;
}

.volatility-value {
  font-size: 14px;
  font-weight: bold;
  color: #409eff;
  min-width: 40px;
  text-align: right;
}

.query-button-wrapper {
  text-align: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #ebeef5;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-header span {
  font-weight: bold;
  color: #303133;
}
</style>